<template>
  <div class="container">
    <el-card class="box-card">
      <div v-if="!voluntarily">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="headcrumbs" >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.id?$route.query.name : '' }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      </div>
      <el-form :inline="true" class="demo-form-inline">
        <div>
          <el-form-item label="目录名称" size="small">
            <el-input v-model.trim="cataloguetotal.directoryName"></el-input>
          </el-form-item>
          <el-form-item class="state" label="状态">
            <el-select placeholder="请选择" size="small" v-model="cataloguetotal.state">
              <el-option
                v-for="item in cataloguestate"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="eliminatesearch">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="searchcatalogue">搜索</el-button>
          </el-form-item>
        </div>
        
        <el-form-item>
          <el-button
            class="goback"
            plain
            icon="el-icon-back"
            size="mini"
            @click="$router.go(-1)"
            v-if="!voluntarily"
            >返回学科</el-button
          >
          <el-button
            class="catalog"
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="addcatalogue"
            >新增目录</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false"> </el-alert>
      <!-- 表单页面 -->
      <el-table style="width: 100%" :data="list">
        <el-table-column label="序号" type="index" width="100"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName" width="200"> </el-table-column>
        <el-table-column label="目录名称" prop="directoryName" width="180"> </el-table-column>
        <el-table-column label="创建者" prop="username" width="200"> </el-table-column>
        <el-table-column label="创建日期" width="200">
          <template #default="{ row }">
            {{ formatTime(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals" width="180"> </el-table-column>
        <el-table-column label="状态" width="180">
          <template #default="{ row }">
            <!-- {{ formatEmployee(row.state) }} -->
            {{ row.state === 0 ? '已禁用' : '已启动' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">
              <template>
                {{ scope.row.state === 1 ? '启动' : '禁用' }}
              </template>
            </el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">禁用</el-button> -->
            <el-button
              :disabled="scope.row.state === 0"
              @click="modification(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              :disabled="scope.row.state === 0"
              @click="deletecatalogue(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <div></div>
        <el-pagination  
          background
          layout="prev, pager, next,sizes,jumper"
          :page-count="Paging.total"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="Paging.pagesize"
          @current-change="pageChange"
          @size-change="sizepageSize"
          v-if="pagingestimate"
        >
        </el-pagination>
      </div>
      <!-- 新增弹框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="dialogVisible"
        width="24%"
        :before-close="handleClose"
        :open="opendialog"
      >
        <el-form
          ref="formName"
          label-width="100px"
          class="elForm"
          :model="addcatalog"
          :rules="rules"
        >
          <el-form-item label="所属学科" prop="subjectID" v-if="voluntarily">
            <el-select placeholder="请选择活动区域" v-model="addcatalog.subjectID">
              <el-option
                v-for="item in addFrom"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input size="mini" v-model="addcatalog.directoryName"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="canceldialog">取 消</el-button>
          <el-button type="primary" @click="Added">确 定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, add, update, remove ,simples} from '@/api/hmmm/directorys.js'
import { simple } from "@/api/hmmm/subjects.js";
// 导入时间转换
import dayjs from 'dayjs'
export default {
  props: {
    name: {
      type: [String, Number]
    },
    id: {
      type: [String, Number]
    }
  },
  watch: {
    // 侦听路由
    $route: {
      handler: async function (route) {
        if (route.query.name) {
          this.routegetcatalogue()
        } else {
          // 如果没有传递的值,那么就进行初始化渲染
          this.getcatalogue()
          //  使新增弹框改变
          this.voluntarily = true
        }
      },
      // 立刻触发
      immediate: true,
      // 深度侦听
      deep: true
    }
  },
  data() {
    return {
      cataloguestate: [
        {
          name: '启动',
          id: 1
        },
        {
          name: '禁用',
          id: 0
        }
      ],
      list: [],
      // 分页数据
      Paging: {
        // 当前页数
        page: 1,
        // 总页数
        total: 2,
        // 页尺寸
        pagesize: 10
      },
      // 目录名称状态
      cataloguetotal: {
        directoryName: '',
        // 状态
        state: null,
        // 学科id
        subjectID: null
      },
      // 目录状态
      Inventorystatus: {
        id: null,
        state: null,
        directoryName: ''
      },
      // 控制弹框
      dialogVisible: false,
      // 新增
      addcatalog: {
        // 目录id
        subjectID: '',
        // 目录名称
        directoryName: '',
        id: ''
      },
      // 校验
      rules: {
        subjectID: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        directoryName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      },
      // 新增判断
      voluntarily: true,
      // 分页器判断
      pagingestimate:true,
      // 简单数据列表用于新增弹框中的渲染数据
      addFrom: [],
      counts:0
    }
  },
  // 调用请求
  created () {
    this.getAddFrom()
  },
  methods: {
    // 如果路由传参进行的渲染
    async routegetcatalogue(){
       // 发送接口请求
          const res = await list({ ...this.cataloguetotal, ...this.Paging })
          let filterres = res.data.items
          // console.log(filterres);
          // 使用过滤器将传过来的值进行过滤
          const resfilter = filterres.filter(item => {
            return (
              item.subjectName == this.$route.query.name 
            )
          })
           
          this.list = resfilter
          //  使新增弹框改变
          this.voluntarily = false
          // 给接口传值
          this.addcatalog.subjectID = +this.$route.query.id
          // 给总页数传值
          this.Paging.total = res.data.pages
          if (this.Paging.total>=2) {
            this.pagingestimate=false
          }else{
            this.pagingestimate=true
          }
          // console.log('侦听器渲染')
    },
    // 初始化渲染页面
    async getcatalogue() {
      const res = await list({ ...this.cataloguetotal, ...this.Paging })
      // console.log('初始化渲染')
      // 渲染列表
      this.list = res.data.items
      this.counts = res.data.counts
      this.Paging.total = res.data.pages
      this.pagingestimate=true
    },
    // 格式化时间
    formatTime(value) {
      // console.log(value)
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    // 分页器
    pageChange(page) {
      this.Paging.page = page
      // 从新渲染页面
      this.getcatalogue()
    },
    // 每页条数
    sizepageSize(pagesize) {
      this.Paging.pagesize = pagesize
      this.getcatalogue()
    },
    // 点击启动按钮
    async handleClick(row) {
      // console.log(slot)
      this.Inventorystatus.id = row.id
      // 点击启动按钮后如果state值是1那么让它变成0,如果是0让它变成1
      this.Inventorystatus.state = row.state === 1 ? 0 : 1
      // 调用目录状态接口
      await changeState(this.Inventorystatus)
      this.getcatalogue()
      this.$message.success('操作成功')
    },
    // 清空dialog数据
    emptydialog() {
      this.addcatalog = {
        // 目录id
        subjectID: '',
        // 目录名称
        directoryName: '',
        id: ''
      }
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.emptydialog()
    },
    // 点开回调
    opendialog() {
      this.getAddFrom ()
      if (this.addcatalog.id) {
        this.emptydialog()
      }
    },
    // 获取学科简单列表
    async getAddFrom () {
        const res = await simple()
        // console.log(res);
        this.addFrom = res.data
    },
    // 点击新增
    addcatalogue() {
      // 打开弹窗
      this.dialogVisible = true
    },
    // 点击修改
    modification(slot) {
      // 打开弹窗
      this.dialogVisible = true
      // 数据回流
      this.addcatalog.id = slot.id
      this.addcatalog.directoryName = slot.directoryName
      this.addcatalog.subjectID = slot.subjectID
    },
    // 点击新增确定
    Added() {
      this.$refs.formName.validate(async valid => {
        if (valid) {
          if (this.addcatalog.id) {
            // 发送修改接口
            await update(this.addcatalog)
          } else {
            // 发送新增接口
            await add(this.addcatalog)
          }
          this.dialogVisible = false
          // 提示
          this.$message.success(this.addcatalog.id ? '修改成功' : '新增成功')
          // 渲染页面
          this.getcatalogue()
          // 清空数据
          this.$refs.formName.resetFields()
          this.emptydialog()
        }
      })
    },
    // 点击取消
    canceldialog() {
      this.dialogVisible = false
      this.emptydialog()
    },
    // 点击删除
    async deletecatalogue(slot) {
      // this.deleteid = slot.id
      this.$confirm('此操作将永久删除, 是否继续?', '提示').then(async () => {
        await remove(slot.id)
        this.$message.success('删除操作成功')
        this.getcatalogue()
      })
    },
    // 点击搜索
    async searchcatalogue() {
      // 发送请求
      const res = await list(this.cataloguetotal)
      // console.log(res)
      this.list = res.data.items
      this.getcatalogue()
    },
    // 点击清除搜索框
    eliminatesearch() {
      this.cataloguetotal = {
        directoryName: '',
        // 状态
        state: null,
        // 学科id
        subjectID: null
      }
      this.getcatalogue()
    }
  }
}
</script>

<style scoped lang="less">

.headcrumbs{
  margin-bottom: 20px;
}
.goback{
  // display: block;
  margin-right: 20px;
  // margin-top: 10px;
  border: none;
}
.demo-form-inline {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.box-card {
  margin: 10px 7px;
}
.state {
  margin-left: 30px;
}
.block {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.el-select {
  width: 100%;
}
.elForm {
  margin-right: 20px;
}
.el-alert {
  margin-bottom: 20px;
}
</style>
